<!-- 添加主容器中的栅格系统 -->
<template>
  <div class="add-container-col" v-if="dialogShow">
    <el-dialog title="添加容器" :visible.sync="dialogShow">
      <div class="add-container-u">
        <el-form :model="form">
          <el-form-item label="插入位置" :label-width="formLabelWidth" style="margin-bottom: 0px;">
            <el-radio-group v-model="form.position">
              <el-radio size="mini" :label="-1">最左侧</el-radio>
              <el-radio size="mini" :label="-2">最右侧</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="close">取 消</el-button>
        <el-button size="small" type="primary" @click="saveclose">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as PubsubType from '@/config/pubsubtype.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import PubSub from 'pubsub-js'
import { mapState } from 'vuex'
import _ from 'lodash'
export default {
  props: {
    tmpContainerColId: {
      type: String
    },
    updateBjContainerBox: {
      type: Function
    }
  },
  computed: {
    ...mapState([
      'design'
    ])
  },
  mounted () {
    PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
      this.close()
    })
  },
  data () {
    return {
      dialogShow: false,
      loading: false,
      containerData: null,
      formLabelWidth: '120px',
      form: {
        position: -2
      }
    }
  },
  methods: {
    show () {
      this.dialogShow = true
      this.loading = false
    },
    close () {
      this.dialogShow = false
      this.name = '添加容器'
      this.containerData = null
      this.form = {
        position: -2
      }
    },
    saveclose () {
      let fellbackdata = BackendjsFunctions.addContainerBox(this.tmpContainerColId, this.form.position)
      let box = _.cloneDeep(fellbackdata.box)
      let col = _.cloneDeep(fellbackdata.col.render.data.row.col)
      this.updateBjContainerBox(box, col)
      this.close()
    }
  },
  components: {
  }
}
</script>

<style scoped>
.add-container-u {
  min-width: 520px;
}
</style>
